// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
@import 'includes/header';

.content-main {
    padding: 0;
    @media #{$mq-md} {
        padding-top: $spacing-2xl;
    }
}

// set dark bg color for rubber band scrolling.
html,
body {
    background-color: $color-ink-80;
}

.content-wrapper {
    background: $color-ink-80 url('/media/img/firefox/whatsnew/nightly-background.svg') no-repeat;
    @include background-size(100%);
    color: $color-white;
}

.c-page-header-logo-fx {
    background-image: none;
    width: 216px;
}

// * -------------------------------------------------------------------------- */
// Emphasis box

.mzp-c-emphasis-box {
    @include border-box;
    color: $body-text-color;
    margin: 0 auto $layout-sm;
    max-width: $content-md - ($layout-md * 2);
    padding: $spacing-xl;

    @supports (--css: variables) {
        color: var(--body-text-color);
    }

    a:link,
    a:visited {
        color: $color-ink-80;
    }

    a:hover,
    a:focus {
        color: inherit;
    }

    abbr {
        text-decoration: none;
    }

    .c-emphasis-box-title {
        @include text-title-sm;
        color: $title-text-color;
        text-align: center;

        @supports (--css: variables) {
            color: var(--title-text-color);
        }
    }
}
